<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">

<dom-module id="tag-item">
    <template>
        <style include="shared-styles tags-and-labels">
             :host {
                position: relative;
            }

            .input-box {
                @apply --layout-horizontal;
                align-items: flex-start;
            }

            strong {
                margin: 8px;
                font-size: 16px;
            }

            vaadin-combo-box {
                margin-right: 8px;
            }

        </style>

        <div class="input-box">
            <strong>[[newIndex]].</strong>
            <vaadin-combo-box class="key" value="{{tag.key}}" items="[[existingTagKeys]]" filter="[[tag.key]]" allow-custom-value>
                <template>
                    [[item]]
                </template>
            </vaadin-combo-box>
            <vaadin-combo-box class="value" value="{{tag.value}}" items="[[existingTagValues]]" filter="[[tag.value]]" allow-custom-value>
                <template>
                    [[item]]
                </template>
            </vaadin-combo-box>
            <paper-icon-button icon="delete" on-tap="_deleteTag" style="padding: 0"></paper-icon-button>
        </div>

    </template>
</dom-module>
<script>
    Polymer({
        is: 'tag-item',

        properties: {
            tag: {
                type: Object,
                notify: true
            },
            existingTagKeys: {
                type: Array
            },
            existingTagValues: {
                type: Array
            },
            oldTag: {
                type: Object,
                value: function() { return {}; },
                computed: 'storeOldTag(tag)'
            },
            index: {
                type: Number
            },
            newIndex: {
                type: Number,
                computed: '_computeNewIndex(index)'
            }
        },
        listeners: {
            'change': '_tagChange',
        },
        storeOldTag: function (tag) {
            //store tag
            var oldTag = {};
            oldTag.key = this.tag.key;
            oldTag.value = this.tag.value;

            return oldTag;
        },
        _computeNewIndex: function (index) {
            return index + 1;
        },
        _deleteTag: function (e) {
            var that = this;
            this.dispatchEvent(new CustomEvent('tag-delete', { bubbles: true, composed: true, detail: {
                tag: that.tag
            } }));
        },
        _tagChange: function (e) {
            var that = this;
            this.dispatchEvent(new CustomEvent('tag-change', { bubbles: true, composed: true, detail: {
                'oldTag': that.oldTag,
                'newTag': that.tag,
                'index': that.index
            } }));
        }
    });
</script>